ui: improve menu folding #989
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fold/unfold the menu bar just by the amount of scroll, not by its full width
|
Wow. I love this improvement. |
Here we manipulate the presence of the class named |
Rewrite it to use `position:` `sticky` and `relative` instead of continuous programmatic position changes On-hover folding-unfolding transition removal is a side-effect
|
Looks good to me. Just a weird out-of-scope bug. On any mobile supports auto-bouncing effect when scrolling area exceeded. And then we may face "false positive" when doing a scroll-to-up action. This may be separated to another issue. Still thanks for this improvement. |
|
Ah, you must be talking about this, right?
My mobile devices don't have this, I didn't know it was a thing. |
|
@WofWca hey! if you can rebase this, i'm ready to review and merge it :) thanks |
|
Will do within the next couple of days. |
|
@Dylan-DPC Done. |
bors
added a commit
to rust-lang/cargo
that referenced
this pull request
Apr 7, 2020
Upgrade to mdBook v0.3.7 This bumps the requirement from Rust v1.34.0 to v1.35.0 for building docs. AFAICT CI is using nightlies so that should be fine, but I thought I'd mention it in case someone thinks this impacts contributors in any way. Other than that, there are a few changes that might impact some users in a visible way, like automatic dark theme support for those who picked that perference in their browser, possible color changes to the scrollbar and to the font size, change in the spacing in the sidebar entries, and many more changes and fixes that won't be too immediately impactful but very good all around. I checked changes from transitive dependency bumps as well, AFAICT there is nothing that *should* impact the final rendering. **tl;dr:** Nothing will explode. Probably. For completeness, my raw notes of outtakes as I was reviewing the change logs: ``` [cosmetic] v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032 Added automatic dark-theme detection based on the CSS prefers-color-scheme feature. This may be enabled by setting output.html.preferred-dark-theme to your preferred dark theme. #1037 rust-lang/mdBook#1037 v0.3.3 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-033 Improvements to the automatic dark theme selection. #1069 rust-lang/mdBook#1069 v0.3.7 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-037 Fixed theme selector focus. #1170 rust-lang/mdBook#1170 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme * users who picked the dark color scheme in their browser will see the cargo doc in dark. [cosmetic] v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032 Use standard scrollbar-color CSS along with webkit extension #816 rust-lang/mdBook#816 * https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color * scroll bar color might change i guess. [helpful] v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032 Updated highlight.js for syntax highlighting updates (primarily to add async/await to Rust highlighting). #1041 rust-lang/mdBook#1041 * not sure cargo doc has many code examples with async/await, but there we go. [warning] v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032 Raised minimum supported rust version to 1.35. #1003 rust-lang/mdBook#1003 * from 1.34.0. [cosmetic] v0.3.4 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-034 Switch to relative rem font sizes from px. #894 rust-lang/mdBook#894 * will impact some displays, but px is already an abstract thing so maybe not that big of an impact. [warning] v0.3.5 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-035 Updated pulldown-cmark to 0.6.1, fixing several issues. #1021 rust-lang/mdBook#1021 * from 0.5, breaking changes. * parsing only -- the team had to do multiple changes but nothing seems like it would impact final rendering [cosmetic] v0.3.6 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-036 Adjusted spacing of sidebar entries. #1137 rust-lang/mdBook#1137 [warning] v0.3.6 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-036 Handlebars updated to 3.0. #1130 rust-lang/mdBook#1130 * from 2.0 * https://github.com/sunng87/handlebars-rust/blob/master/CHANGELOG.md * strictly maintenance and perf AFAICS, no changes to final rendering. [cosmetic] v0.3.6 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-036 Adjusted the menu bar animation to not immediately obscure the top content. #989 rust-lang/mdBook#989 * personal fave. [cosmetic] v0.3.7 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-037 Code spans in headers are no longer highlighted as code. #1162 * users will see some headers change, probably. [fixes] + ~13 fixes impacting rendering in less immediately visible ways. rest should have no impact on end-user experience. ```
Ruin0x11
pushed a commit
to Ruin0x11/mdBook
that referenced
this pull request
Aug 30, 2020
* ui: improve menu folding Fold/unfold the menu bar just by the amount of scroll, not by its full width * refactor: use a variable for the menu bar height * Fix menu scroll jittering, remove hover folding smoothness Rewrite it to use `position:` `sticky` and `relative` instead of continuous programmatic position changes On-hover folding-unfolding transition removal is a side-effect
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fold/unfold the menu bar just by the amount of scroll, not by its full width and remove animation.
Demo: https://wofwca.github.io/mdBook/format/config.html
Details
Before
This is noticeable on touchscreen devices. Suppose you scroll the page so that the line you're reading is the first line on the screen. Now, if you decide to scroll just one line up the menu bar unfolds and covers the part you were reading.
After
Existing functionality checklist/TODO
transitions (on hover, on sidebar show)❓ Not sure what to do with animation. E.g. what do we do if an animation is playing and the user decides to scroll?